<template>
    <div>
        <a-row>
            <a-col span="8" style="padding: 0 12px;">
                <a-card title="选择已有公式">
                    <a-input-search
                        placeholder="输入公式"
                        @search="onSearch"
                        enterButton
                    />
                    <br><br>
                    <a-list :dataSource="data">
                        <a-list-item slot="renderItem" slot-scope="item, index" @click="changeItem(index)" :style="activeIndex == index ? activeStyle : ''" style="cursor:pointer">
                            <div>{{ item.title }}</div>
                        </a-list-item>
                    </a-list>
                    <a href="#" slot="extra">企业版用户可提交工单申请添加</a>
                </a-card>
            </a-col>
            <a-col span="8" style="padding: 0 12px;">
                <a-card title="公式内容">
                    <a-card title="说明" style="width: 100%;">
                        {{ contentData.content }}
                    </a-card>
                    <br>

                    <a-card title="规则" style="width: 100%;">
                        {{ contentData.rules }}
                    </a-card>
                </a-card>
            </a-col>
            <a-col span="8" style="padding: 0 12px;">
                <a-card title="变量设置">
                    <a-button slot="extra" size="small" @click="handleSubmit">保存</a-button>
                    <a-button slot="extra" size="small" style="margin-left: 10px" @click="goBack">返回</a-button>
                    <a-form :form="form">
                        <a-form-item
                            label="公式名称："
                            :label-col="{ span: 7 }"
                            :wrapper-col="{ span: 14 }"
                        >
                            <a-input
                                v-decorator="[
                                    'name',
                                    {rules: [{ required: true, message: '请填写公式名字' }]}
                                ]"
                                placeholder="请输入公式名称"
                            />
                        </a-form-item>
                        <a-form-item
                            label="备注："
                            :label-col="{ span: 7 }"
                            :wrapper-col="{ span: 14 }"
                        >
                            <a-input
                                v-decorator="['remarks']"
                                placeholder="请输入备注"
                            />
                        </a-form-item>
                        <a-form-item 
                            v-for="(item, index) in formItemCount" 
                            :key="index" 
                            :label="'数值'+(index+1)"
                            :label-col="{ span: 7 }"
                            :wrapper-col="{ span: 14 }"
                        >
                            <a-input 
                                v-decorator="['var'+(index+1)+'', {rules: [{required: true, message: '此项必须填写'}]}]"
                                :placeholder="'请输入数值'+(index+1)"
                            /> 
                            <a-input v-decorator="['id',{initialValue: '0'}]" type="hidden"/>
                        </a-form-item>
                    </a-form>
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>
<script>
import { getPayFormulaList, saveTollFormula } from '@/api/cashier'
import { mapGetters } from 'vuex'
export default {
    name: 'charge_toll_add_formula',
    data() {
        return {
            data: [],
            contentData: {
                content: '',
                rules: ''
            },
            formItemCount: 0,
            activeIndex: 0,
            activeStyle: { background: '#f8f8f8'},
            form: this.$form.createForm(this),
        }
    },
    mounted() {
        
        if(this.$route.params.id!='add'){
            getPayFormulaList({token:this.token(),id:this.$route.params.id}).then(res => {
                this.data.push (res.data) 
                this.contentData.content = this.data[0].content
                this.contentData.rules = this.data[0].rules
                this.formItemCount = this.data[0].var_count
                setTimeout(() => {
                    this.form.setFieldsValue({
                        name:res.data.ext.name,
                        remarks:res.data.ext.remarks,
                        id:this.$route.params.id
                    })
                    for(let i =1;i<=this.formItemCount;i++){
                        let values={};
                        values['var'+i]=res.data.ext['var'+i];
                        this.form.setFieldsValue(values)
                    } 
                }, 500);
                           
            }).catch(err => {
                console.log(err)
            })
        }else{
            this.getFormulaList()
        }
    },
    methods: {
        ...mapGetters(['token', 'pmsArId', 'nowMg']),
        onSearch (value) {
            console.log(value)
        },
        changeItem(index) {
            this.activeIndex = index
            this.contentData.content = this.data[index].content
            this.contentData.rules = this.data[index].rules
            this.formItemCount = this.data[index].var_count
        },
        getFormulaList() {
            getPayFormulaList({token:this.token()}).then(res => {
                this.data = res.data
                this.contentData.content = this.data[0].content
                this.contentData.rules = this.data[0].rules
                this.formItemCount = this.data[0].var_count
            }).catch(err => {
                console.log(err)
            })
        },

        // 保存公式
        handleSubmit(e) {
            e.preventDefault();
            this.form.validateFields((err, values) => {
                if(!err) {
                    console.log('Received values of form: ', values);
                    values.for_name = this.data[this.activeIndex].unit;
                    Object.assign(values,{token:this.token()})
                    saveTollFormula(values).then(res => {
                        this.$notification.success({
                            message: '成功',
                            description: `${res.msg}`
                        })
                        this.$router.push({ name: 'charge_toll_index' })
                    }).catch(err => {
                        this.$notification['error']({
                            message: '错误',
                            description: ((err.response || {}).data || {}).message || err || '请求出现错误，请稍后再试',
                            duration: 4
                        })
                    })
                }
            })
        },
        goBack() {
            this.$router.go(-1)
        }
    }
}
</script>
<style scoped>
.ant-card-body {
    padding: 24px;
}
.active-bg {
    background: #f8f8f8;
}
.ant-form-item .ant-form-item-label {
    line-height: 2.2 !important
}
</style>